<!-- 我的 -->
<template>
  <div class="content">
    <header>
      <HeaderPopover name="我的东京" />
    </header>

    <div class="content-linear">
      <!-- 用户信息 -->
      <LinearHeader :content="{ name, token, img }" />

      <!-- plus -->
      <LinearPlus :list="plusFloor" />

      <!-- 店铺信息 -->
      <LinearShops />

      <!-- 广告 -->
      <div class="linear-bulletin">
        <p>{{ freightBulletin }}</p>
      </div>

      <!-- 订单 -->
      <LinearBay />

      <!-- 财产 -->
      <LinearProperty />

      <!-- 广告2 -->
      <div class="linear-img">
        <div class="img"><span>0.01元开卡</span></div>
      </div>

      <!-- 客服 -->
      <LinearActivity />
    </div>

    <!-- 推荐 -->
    <div class="recommend">
      <p>-----为你推荐-----</p>
      <FilmsFhow />
    </div>

    <van-back-top right="5px" bottom="60px" style="background-color: rgba(0, 0, 0, 0.5)" />
  </div>
</template>

<script setup lang="ts" name="content">
import { getCenterList, getCenterRenderList } from '@/api'
import HeaderPopover from './components/header-popover.vue'
import LinearHeader from './components/linear-header.vue'
import LinearPlus from './components/linear-plus.vue'
import LinearShops from './components/linear-shops.vue'
import LinearBay from './components/linear-bay.vue'
import LinearProperty from './components/linear-property.vue'
import LinearActivity from './components/linear-activity.vue'
import FilmsFhow from '../films/components/films-show.vue'
import { useContentStore } from '@/stores/content'

//puls 数据
const plusFloor = ref<plusFloor>()
//广告
const freightBulletin = ref<string>()

//
const name = ref<string>()
const token = ref<string>()
const img = ref<string>()

//加载函数
async function onLoad() {
  //请求接口
  const list = await getCenterRenderList()

  //puls 数据
  plusFloor.value = list.plusFloor
  freightBulletin.value = list.freightBulletin.bulletin
}
onLoad()

onBeforeUnmount(() => {
  // console.log('个人中心卸载')
})

//本地/仓库取数据
watchEffect(() => {
  const content = useContentStore()
  if (!content.img) {
    if (localStorage.getItem('user')) {
      const content = JSON.parse(localStorage.getItem('user') as string)
      name.value = content.username
      token.value = content.token
      img.value = content.img
      return
    }
  }
  name.value = content.username
  token.value = content.token
  img.value = content.img
})

//取名字
defineOptions({
  name: 'content'
})
</script>

<style scoped>
.content {
  height: 100%;
  overflow-y: auto;
}

.content-linear {
  background: url(https://img12.360buyimg.com/img/s750x432_jfs/t1/84804/29/26776/112106/624d07d0E55603649/07ed8923a7bdbad2.png)
    no-repeat scroll 0 0 / 100% auto;
}

.linear-bulletin {
  max-height: 38px;
  height: 38px;
  font-size: 12px;
  color: red;
  background-color: rgb(245, 245, 245);
}
.linear-bulletin > p {
  height: 18px;
  padding: 10px 34px 10px 40px;
  margin: 0 14px;
  background-color: #fff;
  text-align: left;
}

.linear-img {
  height: 49px;
  background-color: rgb(245, 245, 245);
}
.linear-img > .img {
  border-radius: 14px;
  background: url('//img12.360buyimg.com/img/s750x98_jfs/t1/137036/22/22941/72603/6216ec7aE4ba88584/ddbf5ebdb080083b.png.webp');
  background-size: 100%;
  position: relative;
  vertical-align: top;
  height: 49px;
}
.linear-img > .img > span {
  position: absolute;
  right: 0;
  bottom: 12px;
  font-size: 14px;
  background-color: rgb(250, 68, 25);
  padding: 4px 6px;
  margin-right: 6px;
  color: #fff;
  border-radius: 14px;
  text-align: center;
  display: block;
}

.recommend > p {
  height: 20px;
  font-size: 12px;
  margin: 0;

  padding: 6px 0;
  text-align: center;
  background-color: rgb(246, 246, 246);
}

.van-back-top {
  background-color: rgb(19, 18, 18);
}
</style>
